import React from "react";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import { useCategory } from "@/business.InterfaceLayer/hooks/context/CategoryContext";
import { useTranslation } from "react-i18next";
import Link from "next/link";

interface NavigationProps {}

const Navigation: React.FC<NavigationProps> = () => {
  const { activeRefinements, activeCategory } = useCategory();
  const { t } = useTranslation();

  return (
    <>
      {activeRefinements.map((refinement) => (
        <Link href={`/${activeCategory}/${refinement}`} key={refinement}>
          <TextAtom
            type={TextAtomEnum.enum_h5}
            className="text-white uppercase font-bold"
          >
            {t(`Refinements.${refinement}`)}
          </TextAtom>
        </Link>
      ))}
    </>
  );
};

export default Navigation;
